<template>
	<view class="input-skuinfo-page">
		<image class="top-bg" :src="remoteImgUrl+'gasbottle-info-bg.png'" mode=""></image>
		<view class="tab-panel c-flex jc-around" v-if="isShowMask">
			<view class="tab-item " :class="{'activate':item.selected}" v-for="(item,i) in tabs" :key="i" @click="onTabChange(item)">
				{{item.name}}
				<image class="sele-bg" v-if="item.selected" :src="orderImgUrl+'choose.png'"></image>
			</view>
		</view>
		<template v-if="checkBarItem && checkBarItem.value == 1">
			<view class="form c-panel" >
				<view class="form-item c-flex jc-between">
					<text>制造单位</text>
					<view class="c-flex c-item-center" @click="onOpenDialog(1)">
						<text>{{dataForm.madeFactoryName || '请选择'}}</text>
						<view class="down-arrow" v-if="!isShowMask"></view>
					</view>
				</view>
				<view class="form-item c-flex jc-between">
					<text>制造日期</text>
					<view class="c-flex c-item-center">
						<uni-datetime-picker class="date-picker" v-model="dataForm.madeDate" type="date" :border="false"
							:clearIcon="false" start="2001-3-20" end="2038-6-20" placeholder="选择时间" @change="onSeleMadeDate" >
							<view class="">
								{{dataForm.madeDate || '选择时间'}}
							</view>
						</uni-datetime-picker>	
						<view class="down-arrow" v-if="!isShowMask"></view>
					</view>
				</view>
				<view class="form-item c-flex jc-between">
					<text>有效期至</text>
					<view class="c-flex c-item-center">
						<uni-datetime-picker class="date-picker" v-model="dataForm.validDate" type="date" :border="false"
							:clearIcon="false" start="2001-3-20" end="2038-6-20" placeholder="选择时间" @change="onSeleMadeDate" >
							<view class="">
								{{dataForm.validDate || '选择时间'}}
							</view>
						</uni-datetime-picker>	
						<view class="down-arrow" v-if="!isShowMask"></view>
					</view>
				</view>
				<view class="form-item c-flex jc-between">
					<text>气瓶规格</text>
					<view class="c-flex c-item-center" @click="onOpenDialog(2)">
						<text>{{dataForm.skuName || '请选择'}}</text>
						<view class="down-arrow" v-if="!isShowMask"></view>
					</view>
				</view>
				<view class="form-item c-flex jc-between">
					<text>气瓶状态</text>
					<view class="c-flex c-item-center" @click="onOpenDialog(3)">
						<text>{{getName(dataForm.useStatus,'useStatus') || '请选择'}}</text>
						<view class="down-arrow" v-if="!isShowMask"></view>
					</view>
				</view>
				<view class="form-item c-flex jc-between">
					<text>公称压力</text>
					<view>{{dataForm.mpa}}MPa</view>
				</view>
				<view class="form-item c-flex jc-between">
					<text>容积</text>
					<view>{{dataForm.volume}}L</view>
				</view>
				<view class="form-item c-flex jc-between">
					<text>充装单位</text>
					<view class="c-flex c-item-center" @click="onOpenDialog(4)">
						<text>{{dataForm.tenantName || '请选择'}}</text>
						<view class="down-arrow" v-if="!isShowMask"></view>
					</view>
				</view>
				<view class="form-item c-flex jc-between">
					<text>登记证编号</text>
					<input class="uni-input" v-model="dataForm.registerCertNum" type="text" :placeholder="isShowMask?'':'请输入'"  />
				</view>
				
				<view class="form-item c-flex jc-between">
					<text>气瓶品种</text>
					<view class="c-flex c-item-center" @click="onOpenDialog(5)">
						<text>{{getName(dataForm.bottleType,'bottleType') || '请选择'}}</text>
						<view class="down-arrow" v-if="!isShowMask"></view>
					</view>
				</view>
				<view class="form-item c-flex jc-between">
					<text>充装介质</text>
					<view >{{dataForm.gasType||''}}</view>
				</view>
				<view class="form-item c-flex jc-between">
					<text>检验日期</text>
					<view class="c-flex c-item-center">
						<uni-datetime-picker class="date-picker" v-model="dataForm.checkDate" type="date" :border="false"
							:clearIcon="false" start="2001-3-20" end="2038-6-20" placeholder="选择时间" @change="onSeleMadeDate" >
							<view class="">
								{{dataForm.checkDate || '选择时间'}}
							</view>
						</uni-datetime-picker>	
						<view class="down-arrow" v-if="!isShowMask"></view>
					</view>
				</view>
				
				<view class="form-item c-flex jc-between">
					<text>下次检验日期</text>
					<view class="c-flex c-item-center">
						<uni-datetime-picker class="date-picker" v-model="dataForm.nextCheckDate" type="date" :border="false"
							:clearIcon="false" start="2001-3-20" end="2038-6-20" placeholder="选择时间" @change="onSeleMadeDate" >
							<view class="">
								{{dataForm.nextCheckDate || '选择时间'}}
							</view>
						</uni-datetime-picker>	
						<view class="down-arrow" v-if="!isShowMask"></view>
					</view>
				</view>
				<view class="form-item c-flex jc-between">
					<text>二维码</text>
					<view class="c-flex c-item-center" >
						<text class="txt-overflow">{{dataForm.qrCode || '扫一扫'}}</text>
						<image :src="stockImgUrl+'scan-icon.png'" v-if="!isShowMask" @click="onScan('qrCode')"></image>
					</view>
				</view>
				<view class="form-item c-flex jc-between">
					<text>条型码</text>
					<view class="c-flex c-item-center" >
						<text class="txt-overflow">{{dataForm.barCode || '扫一扫'}}</text>
						<image :src="stockImgUrl+'scan-icon.png'" v-if="!isShowMask" @click="onScan('barCode')"></image>
					</view>
				</view>
				
				<view class="form-item c-flex jc-between">
					<text>序列号</text>
					<input class="uni-input" v-model="dataForm.seqNum" type="text"  :placeholder="isShowMask?'':'请输入'" />
				</view>
				<view class="form-item c-flex jc-between">
					<text>内部编号</text>
					<input class="uni-input" v-model="dataForm.innerCode" type="text"  :placeholder="isShowMask?'':'请输入'" />
				</view>
				<view class="mask" v-if="isShowMask"></view>
			</view>
			<view class="submit-bt" @click="onSubmit()" v-if="!isShowMask">保存</view>
			<view class="submit-bt" @click="onUpdate()" v-if="isShowMask">修改</view>
			<view class="dele-bt" @click="onDelete()" v-if="dataForm.flowLocType  == 0 && !dataForm.flowLocId">删除</view>
		</template>
		<inspect ref="inspectRef" v-if="checkBarItem && checkBarItem.value == 2"></inspect>
		<!-- 弹框 -->
		<uni-popup ref="type_popup" type="bottom" :custom="true" :mask-click="true"
							 background-color="rgba(0,0,0,0)" style="border-top-left-radius: 50rpx;" :safe-area="false">
			<view class="pop-content">
				<view class="header c-flex jc-between">
					<view @tap='sure(0)'>取消</view>
					<view @tap='sure(1)'>确定</view>
				</view>
				<view class="search-con c-flex jc-start c-item-center">
					<view class="input-con c-flex jc-start c-item-center">
						<image src="@/static/images/notice/find-icon.png" style="width: 42rpx;max-height: 42rpx;"></image>
						<input class="uni-input" v-model="searchInfo" name="text" confirm-type="search" 
										placeholder="请输入..." @confirm="onInputChange" @input="onInputChange"/>
					</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="popValue" @change="onDataChange" 
										 @pickstart="pickstart" @pickend="pickend" 
										 class="tower_type">
					<picker-view-column >
						<view class="item c-flex c-item-center jc-center" v-for="(item,index) in popList" :key="index">
							<view v-if="dialogType == 3||dialogType == 5">{{item.label}}</view>
							<view v-else>{{item.name}}</view>
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>	
	</view>
</template>

<script>
	import {GAS_BOTTLE_STATUS,GAS_BOTTLE_TYPE} from '@/utils/global.js';
	import {getNameByType} from '@/utils/utils.js';
	import Inspect from './inspect.vue';
	export default{
		components:{Inspect},
		data(){
			return {
				orderImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/order/',
				stockImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/stock/',
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/energy/',
				madeCompanys:[],
				tenants:[],
				skuList:[],
				popList:[],
				useStatus:GAS_BOTTLE_STATUS,
				gasbottleType:GAS_BOTTLE_TYPE,
				searchInfo:'',
				popValue:'',
				indicatorStyle: `height: 50px;line-height:50px;`,
				popIndex:0,
				currSeleItem:null,
				dialogType:'',
				isShowMask:false,
				isAdd:true,
				isMoving:false,
				dataForm:{
					id:'',
					qrCode:'',
					barCode:'',
					madeFactoryName:'',
					skuId:'',
					mpa:'',
					volume:'',
					tenantId:'',
					skuName:'',
					tenantName:'',
					bottleType:'',
					gasType:'',
					nextCheckDate:'',
					checkDate:'',
					validDate:'',
					madeDate:'',
					useStatus:'',
					seqNum:'',
					madeFactoryId:'',
					registerCertNum:'',
				},
				tabs:[{name:'气瓶信息',value:1},{name:'入户安检',value:2}],
				checkBarItem:null,
				dataRule:[
					{field:'qrCode',msg:'二维码不能为空！',required:true},{field:'barCode',msg:'条形码不能为空！',required:false},
					{field:'madeFactoryName',msg:'制造单位不能为空！',required:true},{field:'skuId',msg:'产品规格不能为空！',required:true},
					{field:'seqNum',msg:'序列号不能为空！',required:true},{field:'registerCertNum',msg:'登记证编号不能为空！',required:true},
				]
			}
		},
		onLoad(options) {
			this.dataForm.id = options.id||'';
			this.checkBarItem = this.tabs[0];
			this.checkBarItem.selected = true;
			this.findMadeCompany();
			this.findLpgskuList();
			this.findTenants();
			let title = '';
			if(this.dataForm.id){
				title = '查看详情';
				this.isShowMask = true;
				this.initGasBottleInfo();
			}else{
				title = '新建气瓶';
				this.isShowMask = false;
				this.isAdd = true;
			}
			uni.setNavigationBarTitle({
				title:title
			})
		},
		methods:{
			//初始化气瓶信息
			async initGasBottleInfo(){
				if(this.skuList.length == 0){
					const skuObj = await this.$API.findLpgsku({});
					this.skuList = skuObj.page.list;
				}
				this.$API.findGasBottleInfo(this.dataForm.id).then(res=>{
					this.dataForm = {...res.tydGasBottle};
					const arr = this.skuList.filter(item =>{return this.dataForm.skuId == item.id})
					if(arr.length>0){
					  this.$set(this.dataForm,'skuName',arr[0].name);
					}
				});
			},
			//tab切换
			onTabChange(item){
				this.checkBarItem.selected = false;
				item.selected = true;
				this.checkBarItem = item;
				if(item.value == 2){
					this.$nextTick(()=>{
						this.$refs.inspectRef.initData(this.dataForm.qrCode);
					});
				}
			},
			/**
			 * 查询制造商
			 */
			findMadeCompany(){
				this.$API.findMadCompany({limit:999}).then(res=>{
					this.madeCompanys = res.page.list;
				});
			},
			/**
			 * 查询液化气网点
			 */
			findTenants(){
				this.$API.findTenants({appCode:'energy',appType:4,status:1}).then(res=>{
					this.tenants = res.list;
				});
			},
			/**
			 * 查询规格列表
			 */
			findLpgskuList(){
				if(this.skuList.length > 0)return;
				this.$API.findLpgsku({}).then(res=>{
						this.skuList = res.page.list;
				})
			},
			onDelete(){
				const that = this;
				uni.showModal({
					title: '',
					content: '是否确定删除气瓶?',
					cancelText: '取消',
					confirmText: '是',
					success: function(res) {
						if (res.confirm) {
							that.$API.deleGasBottle(that.dataForm.id).then(res=>{
								uni.showToast({
									title:'操作成功!'
								});
								uni.navigateBack({delta:1});
							})
						}
					}
				});
			},
			onUpdate(){
				this.isShowMask = false;
				this.isAdd = false;
				uni.setNavigationBarTitle({
					title:'修改气瓶'
				})
			},
			//提交表单
			onSubmit(){
				for(let i = 0;i<this.dataRule.length;i++){
					const rItem = this.dataRule[i];
					if(rItem.required){
						const val = this.dataForm[rItem.field];
						if(!val){
							uni.showToast({
								title:rItem.msg,
								icon:'error'
							});
							return;
						}
					}
				}
				let methodName = '';
				if(this.isAdd){
					methodName = 'saveGasBottle';
				}else{
					methodName = 'updateGasBottle';
				}
				this.$API[methodName](this.dataForm).then(res=>{
					uni.showToast({
						title:'操作成功!'
					});
					uni.navigateBack({delta:1});
				})
			},
			onScan(type){
				// // 允许从相机和相册扫码
				const that = this;
				uni.scanCode({
					scanType: [type],
					success: (res) => {
						console.log(res);
						if (res.result) {
							if(type == 'barCode'){
								that.dataForm.barCode = res.result;
							}
							if(type == 'qrCode'){
								that.dataForm.qrCode = res.result;
							}
							
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码');
					}
				})
			},
			onSeleMadeDate(){
				
			},
			getName(value,tag){
				if(tag == 'useStatus'){
					return getNameByType(this.useStatus,value)
				}
				if(tag == 'bottleType'){
					return getNameByType(this.gasbottleType,value)
				}
			},
			pickstart() {
				this.isMoving = true;
			},
			pickend() {
				this.isMoving = false;
			},
			onInputChange(){
				let name = '';
				let propName = '';
				if(this.dialogType == 3 ||this.dialogType == 5){
					propName = 'label'
				}else{
					propName = 'name';
				}
				
				if(this.searchInfo){
					this.popList = this.popList.filter(item =>{return item[propName].indexOf(this.searchInfo) != -1});
				}else{
					if(this.dialogType == 1){
						this.popList = [...this.madeCompanys];
					}
					if(this.dialogType == 2){
						this.popList = [...this.skuList];
					}
					if(this.dialogType == 3){
						this.popList = [...this.useStatus];
					}
					if(this.dialogType == 4){
						this.popList = [...this.tenants];
					}
					if(this.dialogType == 5){
						this.popList = [...this.gasbottleType];
					}
				}
			},
			/**
			 * 确定选择
			 * @param {Object} type
			 */
			sure(type){
				if (this.isMoving) {
						console.log('运动中，不能点击哦')
						return;
				}
				if(type==1){
						this.currSeleItem = this.popList[this.popIndex];
						if(this.dialogType == 1){
							this.dataForm.madeFactoryName = this.currSeleItem.name;
							this.dataForm.madeFactoryId = this.currSeleItem.id;
						}
						if(this.dialogType == 2){
							this.dataForm.skuId = this.currSeleItem.id;
							this.dataForm.skuName = this.currSeleItem.name;
							this.dataForm.gasType = this.currSeleItem.gasType;
							this.dataForm.mpa = this.currSeleItem.mpa;
							this.dataForm.volume = this.currSeleItem.volume;
						}
						if(this.dialogType == 3){
							this.dataForm.useStatus = this.currSeleItem.value;
						}
						if(this.dialogType == 4){
							this.dataForm.tenantId = this.currSeleItem.id;
							this.dataForm.tenantName = this.currSeleItem.name;
						}
						if(this.dialogType == 5){
							this.dataForm.bottleType = this.currSeleItem.value;
							this.dataForm.bottleTypeName = this.currSeleItem.label;
						}
				}
				console.log(this.currSeleItem)
				this.$refs.type_popup.close();
			},
			onOpenDialog(type){
				this.dialogType = type;
				this.popIndex = 0;
				this.searchInfo = '';
				if(type == 1){
					this.popList = [...this.madeCompanys];
				}
				if(type == 2){
					this.popList = [...this.skuList];
				}
				if(type == 3){
					this.popList = [...this.useStatus];
				}
				if(type == 4){
					this.popList = [...this.tenants];
				}
				if(type == 5){
					this.popList = [...this.gasbottleType];
				}
				this.$refs.type_popup.open();
			},
			//弹框选择
			onDataChange(e){
				this.popIndex = e.detail.value[0];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-skuinfo-page{
		background-image: linear-gradient(rgba(249, 195, 115, 0.3) 18%,#F9F9F9 26%);
		.top-bg{width:100%;height:242rpx;}
		.tab-panel{
			background: #FFFFFF;border-radius: 10rpx;font-weight: 500;font-size: 28rpx;color: #333333;margin:0 0rpx 20rpx;padding:28rpx 0;
			.tab-item{
				position: relative;
				.activate{font-weight: 800;font-size: 30rpx;color: #333333;}
				.sele-bg{position: absolute;width: 90rpx;height: 24rpx;bottom: -12rpx;left:6rpx;}
			}
		}
		padding:32rpx;font-family: PingFangSC, PingFang SC;position:relative;height: 100%;
		.c-panel{background: #FFFFFF;border-radius: 20rpx;padding: 32rpx 32rpx 0;}
		.arrow{
			width: 0;height: 0;border-top: 5px solid #F18858; border-right: 4px solid transparent;border-left: 4px solid transparent;margin-left: 10rpx;
		}
		.down-arrow {
			width: 18rpx;height: 18rpx;border-width: 2px 2px 0 0;
			border-color: #F18858;border-style: solid;
			-webkit-transform: matrix(0.51, 0.51, 0.51, -0.51, 5, -2);
			transform: matrix(0.51, 0.51, 0.51, -0.51, 5, -2);
		 }
		.form{
			position:relative;
			.form-item{
				padding-bottom: 30rpx;margin-bottom: 30rpx;border-bottom: 1px solid #efefef;
				>text{font-weight: 500;font-size: 28rpx;color: #333333;}
				>view{
					font-weight: 500;font-size: 28rpx;color: #9B9B9B;
					text{display: inline-block; width: 400rpx;text-overflow: ellipsis; text-align: right;white-space: nowrap;overflow: hidden;}
					image{width:32rpx;height:32rpx;margin-left:16rpx;}
				}
				input{text-align: right;font-weight: 500;font-size: 28rpx;color: #9B9B9B;}
			}
		}
		.submit-bt{
			height: 84rpx;line-height: 84rpx;text-align: center;margin:30rpx auto;
			background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);
			border-radius: 16rpx;border: 2rpx solid #E96949;color:#ffffff;
		}
		.dele-bt{
			width: 710rpx;height: 84rpx;line-height: 84rpx;text-align: center;
			border-radius: 16rpx;border: 2rpx solid #E96949;color:#E96949;
		}
		.search-con{
			margin: 0 36rpx;padding: 10rpx;background: #f3f3f3;border-radius: 20rpx;
			.input-con{    width: 100%;height: 60rpx;}
		}
		.picker-view {width: 750rpx;height: 500rpx;margin-top: 20rpx;}
		.pop-content{
			background: #fff;border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;border: 1rpx solid #fff;position: relative;
			.header{
				font-size: 28rpx;font-weight: 500;padding: 30rpx;border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
				view:first-child{color:#666666;}
				view:last-child{color: #2986FF;}
			}
			
			.item {height: 50px;align-items: center;justify-content: center;text-align: center;}
		}
		.mask{position:absolute;left:0;top:0;width:100%;height:100%;z-index:99999;}
	}
</style>
<style>
	uni-icons {
		display: none !important;
	}
	.uniui-calendar {
		display: none !important;
	}
	.uni-icons {
		display: none !important;
	}
	.uni-date__x-input {
		height: 50rpx !important;
		line-height: 50rpx !important;
	}
	.uni-date-x,
	.uni-date__x-input {
		background-color: transparent !important;
		/* padding-right: 51rpx !important; */
		color: #000 !important;
		text-align: center;
		font-size: 26rpx !important;
		padding: 0 0 !important;
	}
	/*修改提示文字的颜色*/
	input::-webkit-input-placeholder {color: #9B9B9B;}
	input:-moz-placeholder {color: #9B9B9B;}
	input::-moz-placeholder { color: #9B9B9B;}
	input:-ms-input-placeholder { color: #9B9B9B;}
</style>